<template>
	<view>
		<u-modal v-model="show" :content="content">
			<u-form :model="comments" ref="uForm">
				<u-form-item label="内容" prop="name">
					<u-input v-model="comments.commentsText" />
				</u-form-item>
			</u-form>
			<u-button @click="zeroAddOrderDetailIdComments()">提交</u-button>
		</u-modal>
		<view class="comment" v-for="(res, index) in commentList" :key="res.commentsId">
			<view class="left">
				<image :src="res.beforeUser.beforeUserImg" mode="aspectFill"></image>
			</view>
			<view class="right">
				<view class="top">
					<view class="name">{{ res.beforeUser.beforeUserName }}</view>
					<view class="like" :class="{ highlight: res.zeroLike.likeId }">
						<view class="num">{{ res.zeroLike.likeLength }}</view>
						<u-icon v-if="!res.zeroLike.likeId" name="thumb-up" :size="30" color="#9a9a9a"
							@click="getLike(index)"></u-icon>
						<u-icon v-if="res.zeroLike.likeId" name="thumb-up-fill" :size="30" @click="getLike(index)">
						</u-icon>
					</view>
				</view>
				<view class="content">{{ res.commentsText }}</view>
				<view class="reply-box">
					<view class="item" v-if="" v-for="(item, index) in res.commentsList" :key="item.index">
						<view class="username">{{ item.beforeUser.beforeUserName }}</view>
						<view class="text">{{ item.commentsText }}</view>
					</view>
					<view class="all-reply" @tap="toAllReply" v-if="res.commentsList != undefined">
						共{{ res.commentsList.length }}条回复
						<u-icon class="more" name="arrow-right" :size="26"></u-icon>
					</view>
				</view>
				<view class="bottom">
					{{ dayformat(res.commentsCreateTime) }}
					<view class="reply" @click="open(res.commentsId)">回复</view>
				</view>
			</view>
		</view>
		<u-button @click="open()">发布评论</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderdetailid: undefined,
				userid: undefined,
				zeroLike: {
					circleId: undefined,
					commentsId: undefined,
					beforeUserId: undefined,
					orderDetailId: undefined
				},
				commentList: [],
				comments: {
					commentsText: undefined,
					beforeUserId: undefined,
					orderDetailId: undefined,
					replyId: undefined
				},
				show: false,
				show2: false,
				content: '回复评论'
			};
		},
		onLoad(options) {
			console.log(options.shangpinid);

			this.orderdetailid = options.shangpinid,
				uni.getStorage({
					key: 'beforeUser',
					success: (res) => {
						this.userid = res.data.beforeUserId
						console.log(this.userid)
					}
				})
			this.zeroOrderDetailIdToFindComments();

			// this.shangpinid = options.shangpinid;
			// /* 商品信息 */
			// // this.getlunboList(options.goodsId);
			// this.getlunbotu()
		},
		methods: {
			dayformat(value) {
				var date = new Date(value);
				// var date = new Date(value*1000);
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "年" + month + "月" + sdate + "日 " + hour + ":" + minute //+ ":" + second;
				// 返回
				return result;

			},
			open(commentsId) {
				this.comments = {}
				this.comments.beforeUserId = this.userid
				this.comments.orderDetailId = this.orderdetailid
				if (commentsId != null) {
					this.comments.replyId = commentsId
				} else {
					this.comments.replyId = 0
				}
				console.log(this.comments)
				this.show = true;
			},
			zeroAddOrderDetailIdComments() {
				this.show = false
				if (this.comments.commentsText == null) {
					this.show = false;
					this.show2 = true
					uni.showToast({
						title: "回复失败",
						icon: "none"
					})
					// uni.showToast({
					// 	title: '提交成功',
					// 	content: '这是一个模态弹窗',
					// 	duration: 2000
					// });
				} else {
					uni.request({
						url: 'http://localhost:9090/before/bgs/comments/zeroAddOrderDetailIdComments',
						method: "POST",
						dataType: "JSON",
						data: this.comments,
						success: (res) => {
							this.zeroOrderDetailIdToFindComments()
							uni.showToast({
								title: "回复成功",
								icon: "none"
							})
						}
					})
				}
			},
			zeroOrderDetailIdToFindComments() {
				uni.request({
					url: 'http://localhost:9090/before/bgs/comments/zeroOrderDetailIdToFindComments?orderDetailId=' +
						this.orderdetailid + '&beforeUserId=' + this.userid,
					method: "GET",
					dataType: "JSON",
					success: (res) => {
						this.commentList = res.data.data.list
						console.log(this.commentList)
					}
				})
			},
			// 跳转到全部回复
			toAllReply() {
				uni.navigateTo({
					url: '/pages/template/comment/reply'
				});
			},
			// 点赞
			getLike(index) {
				this.commentList[index].zeroLike.likeId = !this.commentList[index].zeroLike.likeId;
				if (this.commentList[index].zeroLike.likeId == true) {
					uni.showToast({
						title: "点赞成功",
						icon: "none"
					})
					this.commentList[index].zeroLike.likeLength++;
				} else {
					uni.showToast({
						title: "取消点赞",
						icon: "none"
					})
					this.commentList[index].zeroLike.likeLength--;
				};
				this.zeroLike.commentsId = this.commentList[index].commentsId
				this.zeroLike.beforeUserId = this.userid
				console.log(this.zeroLike)
				uni.request({
					url: 'http://localhost:9090/before/bgs/circle/ZeroAllComments',
					method: "POST",
					dataType: "JSON",
					data: this.zeroLike,
					success: (res) => {
						console.log(this.commentList)
					}
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.comment {
		display: flex;
		padding: 30rpx;

		.left {
			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #f2f2f2;
			}
		}

		.right {
			flex: 1;
			padding-left: 20rpx;
			font-size: 30rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.name {
					color: #5677fc;
				}

				.like {
					display: flex;
					align-items: center;
					color: #9a9a9a;
					font-size: 26rpx;

					.num {
						margin-right: 4rpx;
						color: #9a9a9a;
					}
				}

				.highlight {
					color: #5677fc;

					.num {
						color: #5677fc;
					}
				}
			}

			.content {
				margin-bottom: 10rpx;
			}

			.reply-box {
				background-color: rgb(242, 242, 242);
				border-radius: 12rpx;

				.item {
					padding: 20rpx;
					border-bottom: solid 2rpx $u-border-color;

					.username {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.all-reply {
					padding: 20rpx;
					display: flex;
					color: #5677fc;
					align-items: center;

					.more {
						margin-left: 6rpx;
					}
				}
			}

			.bottom {
				margin-top: 20rpx;
				display: flex;
				font-size: 24rpx;
				color: #9a9a9a;

				.reply {
					color: #5677fc;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>
